<div class="grid-list page-content ">
	<form nz-form [formGroup]="validateForm" class="page-header">
		<div nz-row [nzGutter]="24">
			<div nz-col [nzSpan]="6">
				<nz-form-item>
					<nz-form-label nzFor="address">村户地址</nz-form-label>
					<nz-form-control>
						<input nz-input placeholder="请填写" formControlName="address" />
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="6">
				<nz-form-item>
					<nz-form-label nzFor="contact">村户联系人</nz-form-label>
					<nz-form-control>
						<input nz-input placeholder="请填写" formControlName="contact" />
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="6">
				<nz-form-item>
					<nz-form-label nzFor="contractNumber">联系人手机号码</nz-form-label>
					<nz-form-control>
						<input nz-input placeholder="请填写" formControlName="contractNumber" />
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="6">
				<nz-form-item style="float: right;">
					<button nz-button *ngIf="authList.includes(authEnum.GRID_HOUSEHOLD_VIEW)"  style="margin-right: 10px;" (click)="onSearch(true)">
						<i nz-icon nzType="search"></i>
						搜索
					</button>
					<button nz-button *ngIf="authList.includes(authEnum.GRID_HOUSEHOLD_ADD)" nzType="primary" style="margin-right: 10px;" (click)="add()">
						<i nz-icon nzType="plus"></i>
						新增
					</button>
					<button nz-button nzType="primary" (click)="upload()">
						<i nz-icon nzType="upload"></i>
						导入
					</button>
					<input type="file" #inputFile style="display: none;" (change)="uploadFile($event)">
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="6">
				<nz-form-item>
					<nz-form-label nzFor="rental">是否出租</nz-form-label>
					<nz-form-control>
						<nz-select formControlName="rental" nzPlaceHolder="请选择" nzAllowClear>
							<nz-option *ngFor="let item of rentalList; let i = index;" [nzLabel]="item" [nzValue]="i">
							</nz-option>
						</nz-select>

					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="6">
				<nz-form-item>
					<nz-form-label nzFor="householdCode">村户编号</nz-form-label>
					<nz-form-control>
						<input nz-input placeholder="请填写" formControlName="householdCode" />
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="6">
				<nz-form-item>
					<nz-form-label nzFor="householdCode">户主</nz-form-label>
					<nz-form-control>
						<input nz-input placeholder="请填写" formControlName="housemaster" />
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="6">
				<nz-form-item>
					<nz-form-label nzFor="householdCode">户主联系电话</nz-form-label>
					<nz-form-control>
						<input nz-input placeholder="请填写" formControlName="housemasterContactNum" />
					</nz-form-control>
				</nz-form-item>
			</div>
		</div>

	</form>


	<nz-table #basicTable [nzData]="data" [nzBordered]="true" [nzShowPagination]="false" nzSize="middle"
		[nzScroll]="{y:  'calc(100vh - 190px - 41px'}" [nzLoading]="nzLoading" [nzPageSize]="page.limit">
		<thead>
			<tr>
				<th nzAlign="center" nzWidth="50px">序号</th>
				<th nzAlign="center" nzWidth="auto">村户详细地址</th>
				<th nzAlign="center" nzWidth="100px">村户联系人</th>
				<th nzAlign="center" nzWidth="160px">村户联系人手机号码</th>
				<th nzAlign="center" nzWidth="90px">是否出租</th>
				<th nzAlign="center" nzWidth="170px">村户编号</th>
				<th nzAlign="center" nzWidth="auto">社区地址</th>
				<th nzAlign="center" nzWidth="15%">户籍人员</th>
				<th nzAlign="center" nzWidth="100px">操作</th>
			</tr>
		</thead>
		<tbody>
			<tr *ngFor="let item of basicTable.data; let i = index;">
				<td nzAlign="center">{{ i + 1}}</td>
				<td nzAlign="center">
					<span class="line-clamp" nz-tooltip [nzTooltipTitle]="item.address">
						{{item.address}}
					</span>
				</td>
				<td nzAlign="center">
					{{item.contact}}
				</td>
				<td nzAlign="center">
					{{item.contractNumber}}
				</td>
				<td nzAlign="center">
					{{item.rental ? rentalList[item.rental] : ''}}
				</td>
				<td nzAlign="center">
					<div class="flex">
						<div style="width: 130px;">
							{{item.householdCode }}
						</div>
						<i style="color: #1890ff;cursor: pointer;" (nzOnConfirm)="qrDownload(item)" [nzOkText]="'下载'" (nzPopconfirmVisibleChange)="createQr($event, item)" nz-popconfirm [nzPopconfirmTitle]="qrTpl" nz-icon nzType="qrcode" nzTheme="outline"></i>
					</div>
					<ng-template #qrTpl>
						<!-- <nz-spin [nzTip]="'加载中...'" [nzSpinning]="false"> -->
							<canvas [id]="'qrid'+item.id"></canvas> 
						<!-- </nz-spin> -->
					</ng-template>
				</td>
				<td nzAlign="center">
					<span class="line-clamp" nz-tooltip [nzTooltipTitle]="item.areaName">
						{{item.areaName}}
					</span>
				</td>
				<td nzAlign="center">
					<span class="line-clamp" nz-tooltip [nzTooltipTitle]="item.housemaster">
						{{item.housemaster}}
					</span>
				</td>
				<td nzAlign="center">
					<ng-container *ngIf="authList.includes(authEnum.GRID_HOUSEHOLD_EDIT)" >
						<a (click)="add(item)">编辑</a>
					</ng-container>
					<nz-divider *ngIf="authList.includes(authEnum.GRID_HOUSEHOLD_EDIT) && authList.includes(authEnum.GRID_HOUSEHOLD_DEL)" nzType="vertical"></nz-divider>
					<ng-container *ngIf="authList.includes(authEnum.GRID_HOUSEHOLD_DEL)" >
						<a nz-popconfirm nzPopconfirmTitle="确定删除吗?" (nzOnConfirm)="del(item)">删除</a>
					</ng-container>
				</td>
			</tr>
		</tbody>
	</nz-table>

	<div class="page-pagination">
		<span *ngIf="page.total">共{{page.total}}条数据</span>
		<nz-pagination [(nzPageIndex)]="page.page" [nzTotal]="page.total" nzShowQuickJumper nzShowSizeChanger
			[(nzPageSize)]="page.limit" (nzPageIndexChange)="pageChange()" (nzPageSizeChange)="pageChange(true)">
		</nz-pagination>
	</div>

</div>